<meta name="csrf-token" content="{{ csrf_token() }}">

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/css/amazeui.min.css">
<link href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/theme/default/layer.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
<link rel="stylesheet" href="/Modules/system/upload/app.css?v=1.1.19">

{{--##主体########################################################################--}}
<div id="vue_mds" class="layui-layer layui-layer-page file-library" id="layui-layer2" type="page" times="2" showtime="0"
     contype="string" style="z-index: 19891016; width: 840px; top: 0px; left: 0px;">
    <div class="layui-layer-title" style="cursor: move;">图片库</div>
    <div id="file-library" class="layui-layer-content">
        <div class="row">
            <div class="file-group" style="display: none;">
                <ul class="nav-new">

                    {{--                    ##循环体#####################################################--}}
                    <li class="ng-scope active" data-group-id="-1">
                        <a class="group-name am-text-truncate" href="javascript:void(0);" title="全部">全部</a>
                    </li>
                    {{--                    ##循环体#####################################################--}}

                </ul>
                <a class="group-add" href="javascript:void(0);">新增分组</a>
            </div>

            <div class="file-list" style="width: 100%;">
                <div class="v-box-header am-cf">
                    <div class="h-left am-fl am-cf">
                        <div class="am-fl">
                            <div class="group-select am-dropdown">

{{--                                <button style="display: none;" type="button" class="am-btn am-btn-sm am-btn-secondary am-dropdown-toggle">--}}
{{--                                    移动至 <span class="am-icon-caret-down"></span>--}}
{{--                                </button>--}}

                                <ul class="group-list am-dropdown-content">
                                    <li class="am-dropdown-header">请选择分组</li>

                                    <li>
                                        <a class="move-file-group" data-group-id="10066"
                                           href="javascript:void(0);">云存储</a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div class="am-fl tpl-table-black-operation">
                            <a href="javascript:void(0);" class="file-delete tpl-table-black-operation-del"
                               data-group-id="2">
                                <i class="am-icon-trash"></i> 删除
                            </a>
                        </div>
                    </div>

                    <div class="h-rigth am-fr">
                        <button type="button" class="layui-btn" id="multigraph">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>

                </div>

                <div id="file-list-body" class="v-box-body" style="width: 100%;">
                    <ul class="file-list-item">


{{--##循环体##############################################--}}
                        <template v-for="(site, key) in list">
                            <li class="ng-scope" :class="{'active':(vm.choice_img.indexOf(site.file_url) != -1)}" v-bind:title="site.file_name" v-bind:data-file-id="key" v-bind:data-file-path="site.file_url">
                                <div class="img-cover" v-bind:style="'background-image: url('+site.file_url+')'"></div>
                                <p class="file-name am-text-center am-text-truncate">(> site.file_name <)</p>
                                <div class="select-mask">
                                    <img src="/Modules/system/upload/img/chose.png">
                                </div>
                            </li>
                        </template>
{{--##循环体##############################################--}}


                    </ul>

{{--                    <div class="file-page-box am-fr">--}}
{{--                        <ul class="pagination">--}}

{{--                            <li>--}}
{{--                                <a class="switch-page" href="javascript:void(0);" title="上一页" data-page="1">«</a>--}}
{{--                            </li>--}}

{{--                            <li>--}}
{{--                                <a class="switch-page" href="javascript:void(0);" title="下一页" data-page="3">»</a>--}}
{{--                            </li>--}}

{{--                        </ul>--}}
{{--                    </div>--}}

                </div>
                <div class="v-box-footer am-cf"></div>
            </div>
        </div>

    </div>
    <span class="layui-layer-setwin">
        <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
    </span>
    <div class="layui-layer-btn layui-layer-btn-">
        <a class="layui-layer-btn0">确定</a>
        <a class="layui-layer-btn1">取消</a>
    </div>
    <span class="layui-layer-resize"></span>
</div>
{{--##主体########################################################################--}}

<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.min.js"></script>
{{--再高的版本vue机制变的太大--}}
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>

<script>

    //由于数据更改导致的虚拟 DOM 重新渲染和打补丁
    var vm = new Vue({
        delimiters: ['(>', '<)'],
        el: '#vue_mds',
        data: {
            list: [],
            choice_img:[],
        },
        methods: {
            details: function () {
            }
        },
        updated:function(){

        },
    });

    //获取目录
    window.rootPath = (function (src) {
        src = document.scripts[document.scripts.length - 1].src;
        return src.substring(0, src.lastIndexOf("/") + 1);
    })();

    layui.config({
        base: rootPath + "/Modules/system/layuimini/js/lay-module/",
        version: true
    }).extend({
        arrayJs: "chinadmin/arrayJs",
    });

    layui.use(['jquery','upload','arrayJs'], function () {

        var singleDouble = "{{$singleDouble}}";

        var upload = layui.upload;
        var $ = layui.jquery;
        var arrayJs = layui.arrayJs;

        var data = {};
        //传入链接
        data.fieldVal = '{{isset($fieldVal)?$fieldVal:''}}';

        /**
         * 选中图片
         */
        $("body").delegate(".ng-scope","click",function(){

            var data_file_path = $(this).attr('data-file-path');

            if($(this).hasClass("active")){
                $(this).removeClass("active");
                //移去本条信息
                var index = vm.choice_img.indexOf(data_file_path);
                vm.choice_img.splice(index,1);
            }else{
                if(singleDouble == "single"){
                    //单选
                    $('.ng-scope').removeClass("active");
                    vm.choice_img = [];                    //单选要清空之前的。
                }
                $(this).addClass("active");
                vm.choice_img.push(data_file_path);
            }

        });

        var src_arr = data.fieldVal.split(",");
        //现在选中那些
        vm.choice_img = vm.choice_img.concat(src_arr);   //合并数据,返回被连接数组的一个副本

        //上传图片
        function upload_render() {
            //多图片上传
            upload.render({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Access-Control-Allow-Origin': '*',
                },
                elem: '#multigraph'
                , url: '/system/upload/image'
                , multiple: true
                , before: function (obj) {
                    //upload_render();
                }
                , done: function (res) {

                    //leapmary::是否是单选
                    if(singleDouble == "single"){
                        vm.choice_img = [res.data.picture_address];
                    }else{
                        vm.choice_img.push(res.data.picture_address);
                    }
                    vm.choice_img = arrayJs.trimSpace(vm.choice_img);   //删除空值

                    console.log(vm.choice_img);

                    //上传完毕
                    get_data();
                    //that.$forceUpdate();
                    //upload_render();

                }
            });
        }

        //获取图片数据
        function get_data(){

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/system/upload/index_ajax",
                timeout: 100000, //超时时间设置，单位毫秒 为一秒
                data: {
                    "fieldVal":vm.choice_img,
                    "showOld":'{{$showOld}}',
                },      //如果传入
                dataType: "json",      //如果有此选项成功返回的json会自动变成对象，如果没有需要用JSON.parse()转换
                success: function (data) {

                    vm.list = data.data.file_list.data;

                }
            });

        }

        //理顺vue和layui执行顺序，就不会渲染冲突
        upload_render();
        get_data();

        /**
         * 批量删除
         */
        $(".file-delete").click(function () {

            if((vm.choice_img[0] == "") || (vm.choice_img[0] == undefined)){
                layer.msg("必须选择最少一张图片");
                return false;
            }

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/system/upload/del",
                timeout: 100000, //超时时间设置，单位毫秒 为一秒
                data: {
                    choice_img: vm.choice_img.toString(),
                },
                dataType: "json",      //如果有此选项成功返回的json会自动变成对象，如果没有需要用JSON.parse()转换
                success: function (data) {
                    layer.msg(data.msg);

                    setTimeout(function () {
                        window.location.reload();
                    },1000);

                }
            });

        });

        //确定提交
        $(".layui-layer-btn0").click(function () {

            var field = "{{$field}}";

            // console.log(vm.choice_img);
            // return false;

            if((vm.choice_img[0] == "") || (vm.choice_img[0] == undefined)){
                layer.msg("必须选择最少一张图片");
                return false;
            }

            var html = "";
            for(var i in vm.choice_img){
                html+='<img data-field="'+field+'" class="choice_img" src="'+vm.choice_img[i]+'">';
            }

            var upload_layer = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(upload_layer);
            {{--parent.layui.$('.{{$img}}').val(vm.choice_img[0]);--}}
            {{--parent.layui.$('.{{$img}}_img').attr("src",vm.choice_img[0]);--}}

            parent.layui.$('.'+field).val(vm.choice_img.toString());
            parent.layui.$('.'+field+'_img').html(html);

        });

        //关闭窗口
        $(".layui-layer-btn1").click(function () {

            var upload_layer = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(upload_layer);

        });

        //确定开局选中
        vm.choice_img = src_arr;

    });

</script>

























